﻿<template>
    <view>
        <u-navbar title="群接龙" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>


        <view class="solitaire-details-bg"></view>
        <view class="solitaire-details-placeholder-body" />

        <!--商家及推荐-->
        <view class="coreshop-margin-20 coreshop-goods-shop-info-view-box">
            <view class="coreshop-shop-view">
                <view class="coreshop-position-absolute">
                    <u-avatar :src="shopLogo" shape="square"></u-avatar>
                </view>
                <view class="coreshop-margin-left-10 coreshop-padding-left-40 coreshop-padding-right-40">
                    <view class="coreshop-margin-bottom-5 coreshop-text-white">{{shopName || ' '}}</view>
                    <view class="coreshop-font-sm u-line-1 coreshop-text-white">{{shareTitle || ' '}}</view>
                </view>
                <u-button type="default" size="mini" :plain="true" @click="doPhoneCall" icon="phone" text="联系商家" color="#272d47"></u-button>
            </view>
        </view>

        <view class="coreshop-bg-white solitaire-details-body">
            <view class="coreshop-flex coreshop-flex-nowrap coreshop-justify-between">
                <view class="coreshop-padding-top-15 coreshop-margin-bottom-10 coreshop-text-black u-line-2 coreshop-font-15">
                    {{model.title || ' '}}
                </view>
                <view class="solitaire-details-shareBox" @click="goShare()">
                    <u-icon name="share" color="#fff" size="22"></u-icon>
                </view>
            </view>
            <view class="coreshop-font-11 coreshop-text-gray coreshop-margin-bottom-10 ">
                {{$u.timeFormat(model.createTime, 'yyyy年mm月dd日')}}发布截至{{$u.timeFormat(model.endTime, 'yyyy年mm月dd日 hh:MM:ss')}}
            </view>
            <view class="coreshop-flex coreshop-align-center coreshop-padding-bottom-5">
                <view class="coreshop-font-11 coreshop-bg-orange coreshop-padding-2 coreshop-border-radius-4 coreshop-margin-right-10" v-if="model.minDeliveryPrice>0">{{model.minDeliveryPrice}}元起送</view>
                <view class="coreshop-font-11 coreshop-bg-olive coreshop-padding-2 coreshop-border-radius-4 coreshop-margin-right-10" v-if="model.startBuyPrice>0">{{model.startBuyPrice}}元起购</view>
            </view>
            <view class="coreshop-padding-10 coreshop-content">
                <u-parse :content="model.contentBody" :selectable="true" v-if="model.contentBody"></u-parse>
                <!-- 无数据时默认显示 -->
                <view class="coreshop-emptybox" v-else>
                    <u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="详情为空" mode="list"></u-empty>
                </view>
            </view>
        </view>

        <!-- 购物车主结构  -->
        <view class="solitaire-details-product-item" v-for="(item, index) in items" :key="index">
            <view class="coreshop-flex">
                <u-avatar :src="item.productObj.images ?  item.productObj.images+'?x-oss-process=image/resize,m_lfit,h_320,w_240' : item.goodObj.image+'?x-oss-process=image/resize,m_lfit,h_320,w_240'" :size="60" shape="square"></u-avatar>
                <view class="coreshop-margin-left-10 coreshop-btn-all">
                    <view class="coreshop-font-13 u-line-2">{{item.goodObj.name}} </view>
                    <view class="coreshop-font-12 coreshop-text-yellow coreshop-margin-top-10  u-line-1">{{ item.productObj.spesDesc }}</view>
                    <view class="coreshop-flex coreshop-justify-between coreshop-margin-top-10">
                        <view>
                            <text class="coreshop-font-16 coreshop-text-red coreshop-text-price">
                                {{item.price}}
                            </text>
                            <text class="coreshop-text-through coreshop-font-11 coreshop-margin-left-10 coreshop-text-grey">市场价￥{{ item.productObj.mktprice  || '0.00'}}</text>
                        </view>
                        <view class="cart-shoppingcard-goods-number">
                            <u-number-box buttonSize="24" integer :name="index" :value="item.nums" @change="toNumberChange" :step="1" :min="0" :max="item.oneCanBuy"></u-number-box>
                        </view>
                    </view>
                    <view class="cart-space-between">
                        <text class="cart-shoppingcard-remove cart-icons icon-msg" v-if="item.stockNo">库存不足</text>
                        <text class="cart-shoppingcard-remove cart-icons icon-msg" v-else-if="item.stockTension">库存紧张</text>
                        <text class="cart-shoppingcard-remove cart-icons" v-else=""></text>
                    </view>
                </view>
            </view>
        </view>
        <!--内容区-->
        <view class="coreshop-margin-10 coreshop-padding-top-10 coreshop-bg-white">
            <view class="coreshop-font-md coreshop-padding-top-10 coreshop-padding-bottom-10 coreshop-padding-left-10 coreshop-padding-right-10 coreshop-flex-direction-row">
                <u-icon name="more-circle" color="#e54d42" label="接龙清单" labelSize="15px" label-pos="right"></u-icon>
            </view>
            <view class="coreshop-padding-bottom-10">
                <!--接龙记录-->
                <view v-if="records.length>0">
                    <view class="coreshop-flex coreshop-flex-nowrap coreshop-justify-between coreshop-padding-5 coreshop-margin-10 coreshop-bg-main" v-for="(item, index) in records" :key="index">
                        <view class="coreshop-flex coreshop-flex-nowrap coreshop-justify-between coreshop-align-center">
                            <text class="coreshop-text-black coreshop-font-12">{{ records.length-index}}</text>
                            <view class="coreshop-margin-left-10 coreshop-width-max-content">
                                <view class="coreshop-flex coreshop-flex-nowrap coreshop-justify-between ">
                                    <view class="coreshop-margin-right-5">
                                        <u-avatar :src="item.avatarImage" :size="20"></u-avatar>
                                    </view>
                                    <text class="coreshop-text-black coreshop-font-12 u-line-1">{{ item.nickName==null ?'佚名': item.nickName}}</text>
                                </view>
                                <text class="coreshop-text-gray coreshop-font-10">{{$u.timeFormat(item.create, 'mm月dd日')}}</text>
                            </view>
                        </view>
                        <view class="coreshop-text-right coreshop-flex-direction-column">
                            <text class="coreshop-text-black coreshop-font-11 u-line-2">{{ item.productSku}}</text>
                            <text class="coreshop-text-gray coreshop-margin-left-10 coreshop-font-10">x{{ item.nums}}</text>
                        </view>
                    </view>
                </view>
                <!-- 无数据时默认显示 -->
                <view class="coreshop-emptybox coreshop-margin-0" v-else>
                    <u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="就你购买后展示效果了^_^" mode="list"></u-empty>
                </view>
            </view>
        </view>

        <!-- 分享弹窗 -->
        <view class="coreshop-padding-10">
            <u-popup mode="bottom" :show="shareBox" ref="share">
                <!-- #ifdef MP-WEIXIN -->
                <coreshop-share-wx :objectId="model.id" :shareType="12" @close="closeShare()"></coreshop-share-wx>
                <!-- #endif -->
                <!-- #ifdef APP-PLUS || APP-PLUS-NVUE -->
                <coreshop-share-app :objectId="model.id" :shareType="12" @close="closeShare()"></coreshop-share-app>
                <!-- #endif -->
            </u-popup>
            <div id="qrCode" ref="qrCodeDiv"></div>
        </view>

        <view class="coreshop-foot-hight-view" />
        <!--按钮-->
        <view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom">
            <view class="coreshop-flex coreshop-padding-10 coreshop-justify-between coreshop-align-center coreshop-percent-100">
                <view>
                    <text>合计 :</text>
                    <text class="coreshop-font-26 coreshop-text-red">￥{{totalprice}}</text>
                </view>
                <view class="coreshop-width-fit-content">
                    <u-button type="error" size="normal" @click="doSubmit" :disabled='submitStatus' :loading='submitStatus'>立即结算</u-button>
                </view>
            </view>
        </view>
        <!-- 登录提示 -->
        <coreshop-login-modal></coreshop-login-modal>

    </view>

</template>

<script>
    export default {

        data() {
            return {
                id: 0,
                model: {},
                items: [],
                records: [],
                background: {
                    background: '#272d47'
                },
                customButtonStyle: {
                    background: 'none',
                    color: '#fff'
                },
                totalprice: 0,
                cart: [],
                type: 2,
                cartType: this.$globalConstVars.paymentType.solitaire,
                shareBox: false,
                submitStatus: false,
                shareUrl: this.$globalConstVars.shareUrl,
            }
        },
        onLoad(e) {
            this.id = e.id;
        },
        onShow() {
            this.getDetial();
            this.submitStatus = false;
        },
        computed: {
            shopName() {
                return this.$store.state.config.shopName;
            },
            shareTitle() {
                return this.$store.state.config.shareTitle;
            },
            shopLogo() {
                return this.$store.state.config.shopLogo;
            },
        },
        methods: {
            //获取列表
            getDetial() {
                let data = {
                    id: this.id
                }
                this.$u.api.getSolitaireDetail(data).then(res => {
                    if (res.status) {
                        this.model = res.data.model;
                        this.items = res.data.items;
                        this.records = res.data.record;
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
            },
            //获取商品总额
            getGoodsTotalMoney() {
                var goodsTotalMoney = 0
                this.cart.forEach(function (item, index, input) {
                    goodsTotalMoney += item.price * item.nums
                })
                this.totalprice = parseFloat(goodsTotalMoney).toFixed(2);
                console.log(this.totalprice);
            },
            toNumberChange: function (e) {
                this.$u.throttle(this.numberChange(e), 500)
            },
            numberChange: function (e) {
                var _this = this;
                var item = this.items[e.name];
                var nums = e.value;

                uni.showLoading({
                    title: '加载中',
                    mask: true
                });

                if (nums > 0) {
                    let data = {
                        ProductId: item.productId,
                        Nums: nums,
                        type: this.type,
                        cartType: this.cartType,
                        objectId: this.id
                    };
                    _this.$u.api.addCart(data).then(res => {
                        if (res.status) {
                            if (_this.cart.length < 1) {
                                _this.cart.push({
                                    key: e.name,
                                    id: res.data,
                                    productId: item.productId,
                                    goodsId: item.goodId,
                                    nums: e.value,
                                    price: item.price
                                })
                            } else {
                                var isIn = false
                                for (var i = 0; i < _this.cart.length; i++) {
                                    if (_this.cart[i].key == e.name && _this.cart[i].productId == item.productId) {
                                        _this.cart[i] = {
                                            key: e.name,
                                            id: res.data,
                                            productId: item.productId,
                                            goodsId: item.goodId,
                                            nums: e.value,
                                            price: item.price
                                        }
                                        isIn = true
                                    }
                                }
                                if (!isIn) {
                                    _this.cart.push({
                                        key: e.name,
                                        id: res.data,
                                        productId: item.productId,
                                        goodsId: item.goodId,
                                        nums: e.value,
                                        price: item.price
                                    })
                                }
                            }
                            _this.getGoodsTotalMoney();
                            setTimeout(function () {
                                uni.hideLoading();
                            }, 500);
                        } else {
                            _this.$u.toast(res.msg);
                            setTimeout(function () {
                                uni.hideLoading();
                            }, 500);
                        }
                    });
                } else {
                    var deleteIndex = -1;
                    var deleteId = 0;
                    for (var i = 0; i < _this.cart.length; i++) {
                        if (_this.cart[i].key == e.name && _this.cart[i].productId == item.productId) {
                            deleteIndex = i;
                            deleteId = _this.cart[i].id;
                        }
                    }
                    if (deleteIndex >= 0 && deleteId > 0) {
                        let data = {
                            id: deleteId
                        };
                        _this.$u.api.removeCart(data).then(res => {
                            if (res.status) {
                                _this.cart.splice(deleteIndex, 1);
                                _this.getGoodsTotalMoney();
                                setTimeout(function () {
                                    uni.hideLoading();
                                }, 500);
                            } else {
                                setTimeout(function () {
                                    uni.hideLoading();
                                }, 500);
                            }
                        });
                    }
                }
            },
            doSubmit() {
                if (this.cart.length < 1) {
                    this.$u.toast('请先选择商品')
                    return true
                }
                //var totalprice = parseFloat(this.totalprice);
                //var startBuyPrice = parseFloat(this.model.startBuyPrice);
                //console.log('商品价格：' + this.totalprice);
                //console.log('起购价格：' + this.model.startBuyPrice);
                if (this.totalprice < this.model.startBuyPrice) {
                    this.$u.toast('最小购买价格为' + this.model.startBuyPrice + '元,请增加购买产品')
                    return true
                }
                this.submitStatus = true;
                let newData = '';
                for (var i = 0; i < this.cart.length; i++) {
                    if (this.cart[i].nums > 0) {
                        newData += ',' + this.cart[i].id;
                    }
                }
                if (newData.substr(0, 1) == ',') {
                    newData = newData.substr(1);
                }
                if (newData.length > 0) {
                    var str = '/pages/placeOrder/index/index?orderType=' + this.cartType + '&objectId=' + this.id + '&cartIds=' + JSON.stringify(newData);
                    console.log(str);
                    this.$u.route(str);
                    return true;
                } else {
                    //没有选择不跳转
                }
            },
            // 跳转到h5分享页面
            goShare() {
                this.shareBox = true;
            },
            closeShare() {
                this.shareBox = false;
            },
            //获取分享URL
            getShareUrl() {
                let data = {
                    client: this.$globalConstVars.shareClient.wxMiNiProgram,
                    url: this.$globalConstVars.shareUrl,
                    type: this.$globalConstVars.shareModel.url,
                    page: this.$globalConstVars.shareType.solitaire,
                    params: {
                        id: this.model.id,
                    }
                };
                let userToken = this.$db.get('userToken');
                if (userToken && userToken != '') {
                    data.token = userToken
                }
                this.$u.api.share(data).then(res => {
                    this.shareUrl = res.data
                });
            },
        },
        watch: {
            model: {
                handler() {
                    this.getShareUrl();
                },
                deep: true
            }
        },
        //分享
        onShareAppMessage(res) {
            return {
                title: this.model.title,
                imageUrl: this.model.thumbnail,
                path: this.shareUrl
            }
        },
        onShareTimeline(res) {
            return {
                title: this.model.title,
                imageUrl: this.model.thumbnail,
                path: this.shareUrl
            }
        },
    }
</script>

<style lang="scss">
    image { display: block; }
</style>
